<template>
  <el-dialog
    title="费用修改"
    v-model="props.params.visible"
    width="1100px"
    append-to-body
    :before-close="cancel"
  >
    <el-form
      :model="addForm"
      ref="addRef"
      :inline="true"
      :rules="addRules"
      label-width="100px"
    >
      <el-form-item label="服务费" prop="serviceFee">
        <el-input-number
          v-model="addForm.serviceFee"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="抛光费" prop="polishFee">
        <el-input-number
          v-model="addForm.polishFee"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="售后费" prop="afterSalesFee">
        <el-input-number
          v-model="addForm.afterSalesFee"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="维修工费" prop="maintenanceCost">
        <el-input-number
          v-model="addForm.maintenanceCost"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="维修提成" prop="maintenanceCommissions">
        <el-input-number
          v-model="addForm.maintenanceCommissions"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="销售提成" prop="salesCommissions">
        <el-input-number
          v-model="addForm.salesCommissions"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="快递费用" prop="expressFee">
        <el-input-number
          v-model="addForm.expressFee"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="成交价" prop="salesPrice">
        <el-input-number
          v-model="addForm.salesPrice"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="回收价格" prop="recyclePrice">
        <el-input-number
          v-model="addForm.recyclePrice"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="维修人" prop="maintenancePersonId">
        <el-select
          v-model="addForm.maintenancePersonId"
          filterable
          clearable
          remote
          reserve-keyword
          placeholder="请选择维修人"
          :remote-method="getUserOption"
          :loading="userLoading"
          style="width: 220px"
          @change="handleChooseUser"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="擦针人员" prop="wippePinPersonId">
        <el-select
          v-model="addForm.wippePinPersonId"
          filterable
          clearable
          remote
          reserve-keyword
          placeholder="请选择擦针人员"
          :remote-method="getUserOptionWp"
          :loading="userLoading"
          style="width: 220px"
          @change="handleChooseUserWP"
        >
          <el-option
            v-for="item in userWpOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品编码" prop="ref">
        <el-input
          :disabled="basicInfo"
          v-model="addForm.ref"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="商品型号" prop="model">
        <el-input
          :disabled="basicInfo"
          v-model="addForm.model"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-select
          v-model="addForm.brand"
          filterable
          reserve-keyword
          clearable
          remote
          :remote-method="getItemBrand"
          default-first-option
          :disabled="basicInfo"
          placeholder="请选择品牌"
          style="width: 220px"
        >
          <el-option
            v-for="item in item_brand"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    
      <el-form-item label="回收编码" prop="recycleCode">
        <el-input
          :disabled="basicInfo"
          v-model="addForm.recycleCode"
          placeholder="请输入"
          clearable
          style="width: 220px"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { edit } from "@/api/fee/skesItemFee";
import { optionSelect } from "@/api/system/skesItem";
import { userOptionSelect } from "@/api/system/user";
import useUserStore from "@/store/modules/user";
import { listData } from "@/api/system/dict/data";

import { computed, watchEffect } from "vue";
const props = defineProps({
  params: Object,
});
const emits = defineEmits(["update:visible", "refresh"]);
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const fileList = ref([]);
const fileListBack = ref([]);
const addForm = ref({
  serviceFee: undefined,
  polishFee: undefined,
  afterSalesFee: undefined,
  maintenanceCost: undefined,
  maintenanceCommissions: undefined,
  salesCommissions: undefined,
  expressFee: undefined,
  otherFee: undefined,
  ref: undefined,
  model: undefined,
  brand: undefined,
  recyclePrice: undefined,
  recycleCode: undefined,
  maintenancePersonId: undefined
});
const basicInfo = ref(true);
watchEffect(() => {
  const { visible, obj } = props.params;
  addForm.value = JSON.parse(obj);
  if (visible) {
    getItemBrand(addForm.value.brand);
  }
});

/** 获取商品详情 */
function getDetail() {
  getRegister(props.params.id).then((response) => {
    const { salesPersonId, paymentStatus, watchImageUrl, watchImageUrlBack } =
      response.data[0];
    const sId =
      typeof salesPersonId === "number" ? salesPersonId + "" : salesPersonId;
    const pS =
      typeof paymentStatus === "number" ? paymentStatus + "" : paymentStatus;
    fileList.value[0] = { url: watchImageUrl };
    fileListBack.value[0] = { url: watchImageUrlBack };
    addForm.value = {
      ...response.data[0],
      salesPersonId: sId,
      paymentStatus: pS,
    };
  });
}
/** 品牌 */
const brandLoading = ref(false);
const item_brand = ref([]);
async function getItemBrand(query) {
  if (query) {
    brandLoading.value = true;
    let label = "";
    let val = "";
    if (isNaN(query)) {
      label = query;
    } else {
      val = query;
    }
    const { rows } = await listData({
      pageNum: 1,
      pageSize: 10,
      dictType: "item_brand",
      dictValue: val,
      dictLabel: label,
    });
    item_brand.value = rows.map((i) => {
      const { dictValue, dictLabel } = i;
      return {
        value: dictValue,
        label: dictLabel,
      };
    });
    brandLoading.value = false;
  }
}

const userWpLoading = ref(false);
const userWpOptions = ref([]);
async function getUserOptionWp(query) {
  if (query) {
    userWpLoading.value = true;
    const { data } = await userOptionSelect({ queryKey: query });
    userWpOptions.value = data.map((i) => {
      const { userId, nickName, userName } = i;
      return {
        value: i.userId * 1,
        label: `${userId},${nickName},${userName}`,
        nickName,
        userName,
      };
    });
    userWpLoading.value = false;
  }
}
function handleChooseUserWP(userId) {
  const { nickName, userName } = userWpOptions.value.find(
    (i) => i.value === userId
  ) || {
    nickName: undefined,
    userName: undefined,
  };
  addForm.value.wippePinPerson = nickName;
  addForm.value.wippePinPersonName = userName;
}
getUserOptionWp(" ");

/** 用户下拉框 */
const userLoading = ref(false);
const userOptions = ref([]);
async function getUserOption(query) {
  if (query) {
    userLoading.value = true;
    const { data } = await userOptionSelect({ queryKey: query });
    userOptions.value = data.map((i) => {
      const { userId, nickName, userName } = i;
      return {
        value: i.userId * 1,
        label: `${userId},${nickName},${userName}`,
        nickName,
        userName,
      };
    });
    userLoading.value = false;
  }
}
function handleChooseUser(userId) {
  const { nickName, userName } = userOptions.value.find(
    (i) => i.value === userId
  ) || {
    nickName: undefined,
    userName: undefined,
  };
  addForm.value.maintenancePerson = nickName;
  addForm.value.maintenancePersonName = userName;
}
getUserOption(" ");
/** 重置表单  */
function reset() {
  addForm.value.salesPerson = undefined;
  proxy.resetForm("addRef");
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["addRef"].validate((valid) => {
    if (valid) {
      edit(addForm.value).then((response) => {
        proxy.$modal.msgSuccess("修改费用成功");
        emits("refresh");
        cancel();
      });
    }
  });
}
/** 取消按钮 */
function cancel() {
  reset();
  emits("update:visible", false);
}
</script>
